<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }">
    <template #header>
      <div class="f-jc-sb f-ali-c">
        <h2 class="lg">我的日程</h2>
        <el-button type="primary" icon="Plus" size="default" @click="addTodo">新建日程</el-button>
        
      </div>
    </template>
    <el-row>
      <el-col :span="6">
        <div class="todoWrap">
          <el-calendar v-model="calendarData.today" class="calendar h-300" ref="calendar">
            <template #header="{date}">
              <div class="f-jc-sb w-100p">
                <i class="arrowLeft arrow" @click="selectDate('prev-month')"></i>
                <i class="current">{{ date }}</i>
                <i class="arrowRight arrow" @click="selectDate('next-month')"></i>
              </div>
            </template>
            <template #date-cell="{data}">
              <div class="w-30 h-30 m-3 m-t-4">
                {{ data.day.split('-')[2] }}
              </div>
            </template>
          </el-calendar>
          <div class="dateType">
            <h6 class="f-jc-sb">
              <span>日程类型</span>
              <el-tooltip style="position: relative;top: 3px;right: 20px;" content="添加日程类型" placement="top" effect="dark">
                <i class="addType"></i>
              </el-tooltip>
            </h6>
            <ul class="content">
              <li v-for="item in 6" :key="item">
                <el-icon><CircleCheckFilled /></el-icon>
                <i>个人提醒</i>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="18"></el-col>
    </el-row>
    
  </el-card>
  
</template>

<script lang="ts" setup>
import { CalendarDateType } from 'element-plus';
import { reactive, ref } from 'vue';

const calendarData = reactive({
  today: new Date()
})
const calendar = ref()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
const addTodo = () => {
    
}
</script>

<style lang="scss" scoped>
.todoWrap {
  height: 545px;
  padding-right: 20px;
  margin-right: -10px;
  overflow-y: scroll;

  .arrowLeft {
    transform: rotate(-135deg);
  }

  .arrowRight {
    position: relative;
    top: 1px;
    transform: rotate(45deg);
  }

  
  .el-calendar {
    --el-calendar-cell-width: 39px;
    &::v-deep .el-calendar__header {
      padding: 0;
    }

    &::v-deep .el-calendar__body {
      padding: 0;
    }
  }


  .dateType {
    display: flex;
    flex-direction: column;

    .addType {
      position: relative;
      right: 20px;
      top: 1px;
      content: url('@/assets/images/add.png');
    }
    .content {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 20px;

      & li {
        display: flex;
        margin: 7px;
        gap: 7px;
      }
    }
  }
}
</style>